<template>
  <div class="order-box">
    <s-header :name="'我的订单'" :back="'/user'"></s-header>

    <div class="content">
      <van-list>
        <div v-for="(item, index) in orderList" :key="index" class="order-item-box" @click="goTo(item.orderId)">
          <div class="order-item-header">
            <span>订单时间：{{ item.createTime }}</span>
            <span>{{ item.orderStatusString }}</span>
          </div>

          <van-card
              :key="goodList[index].goodId"
              :price="goodList[index].sellingPrice"
              :desc="goodList[index].introduction"
              :title="goodList[index].name"
              :thumb="goodList[index].pictures"
              :tag="item.status"
          >
          </van-card>

        </div>
      </van-list>
    </div>

  </div>
</template>

<script>
import {reactive, toRefs} from 'vue';
import sHeader from '@/components/SimpleHeader'
import {getOrderList} from '@/service/order'
import {useRouter} from 'vue-router';
import {onMounted} from "vue";
import {getGoodByIdWithHeadImg} from "@/service/good";

export default {
  components: {
    sHeader
  },
  setup() {
    const router = useRouter()
    const state = reactive({
      orderList: [],
      goodList: [],
    })

    onMounted(async () => {
      const {data} = await getOrderList()
      state.orderList = data
      data.map(async (order) => {
        const {good} = await getGoodByIdWithHeadImg({goodId: order.goodId})
        switch (order.status) {
          case 0:
            order.status = "已付款"
            break;
          case 1:
            order.status = "已付款"
            break;
          case 2:
            order.status = "已发货"
            break;
          case 3:
            order.status = "已收货"
            break;
          case 4:
            order.status = "已完成"
            break;
          case 5:
            order.status = "已取消"
            break;
        }
        state.goodList.push(good)
      })
    })

    const goTo = (id) => {
      router.push({path: '/order-detail', query: {id}})
    }

    const goBack = () => {
      router.go(-1)
    }

    return {
      ...toRefs(state),
      goTo,
      goBack
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../common/style/mixin';

.order-box {
  .order-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    .fj();
    .wh(100%, 44px);
    line-height: 44px;
    padding: 0 10px;
    .boxSizing();
    color: #252525;
    background: #fff;
    border-bottom: 1px solid #dcdcdc;

    .order-name {
      font-size: 14px;
    }
  }

  .order-tab {
    position: fixed;
    left: 0;
    z-index: 1000;
    width: 100%;
    border-bottom: 1px solid #e9e9e9;
  }

  .skeleton {
    margin-top: 60px;
  }

  .content {
    height: calc(~"(100vh - 70px)");
    overflow: hidden;
    overflow-y: scroll;
    margin-top: 34px;
  }

  .order-list-refresh {
    .van-card__content {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .van-pull-refresh__head {
      background: #f9f9f9;
    }

    .order-item-box {
      margin: 20px 10px;
      background-color: #fff;

      .order-item-header {
        padding: 10px 20px 0 20px;
        display: flex;
        justify-content: space-between;
      }

      .van-card {
        background-color: #fff;
        margin-top: 0;
      }
    }
  }
}
</style>
